import React, { useState, useEffect } from 'react'
import './style.less'
import loadeImage from '../../../../assets/images/loadimg.gif'
import bloadImageAsync from '../../../../utils/loadImg'
import { Link } from 'react-router-dom'
export default function Index(props) {
    const [img, setImg] = useState(loadeImage)
    const data = props.data
    useEffect(() => {
        bloadImageAsync(data.img).then(res => {
            setImg(res.src)
            console.log('imgok')
        })
    }, [data.img])
    return (
        <div className="list-item">
            <Link to={`/details/${data.id}`}>
                <div style={{ minHeight: '300px' }}>
                    <img alt="" src={img} />
                </div>

                <div className="mask">
                    <div className="left">
                        <p>{data.title}</p>
                        <p>{data.houseType}</p>
                    </div>
                    <div className="right">
                        <div className="btn">
                            {data.rentType}
                        </div>
                        <p dangerouslySetInnerHTML={{ __html: data.price + "元/月" }}></p>
                    </div>
                </div>
            </Link>
        </div>
    )
}
